<template>
    <div class="notification-container">
        <!-- 面包屑导航 -->
        <div class="breadcrumb-container">
            <el-breadcrumb separator="/" class="breadcrumb-nav">
                <el-breadcrumb-item>
                    <router-link to="/OnePages" class="breadcrumb-link">首页</router-link>
                </el-breadcrumb-item>
                <el-breadcrumb-item>
                    <span class="breadcrumb-text">个人设置</span>
                </el-breadcrumb-item>
                <el-breadcrumb-item>
                    <span class="breadcrumb-current">消息通知</span>
                </el-breadcrumb-item>
            </el-breadcrumb>

            <!-- 页面标题和描述 -->
            <div class="page-header">
                <h1 class="page-title">消息通知</h1>
                <p class="page-description">查看和管理您的系统通知消息</p>
            </div>

            <!-- 分隔线 -->
            <div class="divider"></div>
        </div>

        <!-- 通知页面内容 -->
        <div class="notification-content">
            <!-- 统计卡片 -->
            <div class="stats-section">
                <el-row :gutter="20">
                    <el-col :span="6">
                        <div class="stat-card unread-card">
                            <div class="stat-icon">
                                <el-icon size="24">
                                    <Bell />
                                </el-icon>
                            </div>
                            <div class="stat-info">
                                <h3>未读消息</h3>
                                <p class="stat-number">{{ unreadCount }}</p>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="stat-card total-card">
                            <div class="stat-icon">
                                <el-icon size="24">
                                    <Message />
                                </el-icon>
                            </div>
                            <div class="stat-info">
                                <h3>总消息数</h3>
                                <p class="stat-number">{{ totalCount }}</p>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="stat-card system-card">
                            <div class="stat-icon">
                                <el-icon size="24">
                                    <Setting />
                                </el-icon>
                            </div>
                            <div class="stat-info">
                                <h3>系统通知</h3>
                                <p class="stat-number">{{ systemCount }}</p>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="stat-card finance-card">
                            <div class="stat-icon">
                                <el-icon size="24">
                                    <Coin />
                                </el-icon>
                            </div>
                            <div class="stat-info">
                                <h3>财务通知</h3>
                                <p class="stat-number">{{ financeCount }}</p>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>

            <!-- 筛选和操作区域 -->
            <div class="filter-section">
                <div class="filter-left">
                    <el-select v-model="selectedType" placeholder="选择消息类型" @change="filterMessages" clearable>
                        <el-option label="全部消息" value="" />
                        <el-option label="系统通知" value="system" />
                        <el-option label="财务通知" value="finance" />
                        <el-option label="工作提醒" value="work" />
                        <el-option label="安全提醒" value="security" />
                    </el-select>

                    <el-select v-model="selectedStatus" placeholder="选择状态" @change="filterMessages" clearable>
                        <el-option label="全部状态" value="" />
                        <el-option label="未读" value="unread" />
                        <el-option label="已读" value="read" />
                    </el-select>
                </div>

                <div class="filter-right">
                    <el-button type="primary" :icon="Check" @click="markAllAsRead" :disabled="unreadCount === 0">
                        全部标记为已读
                    </el-button>
                    <el-button type="danger" :icon="Delete" @click="deleteAllRead" :disabled="readCount === 0">
                        删除已读消息
                    </el-button>
                </div>
            </div>

            <!-- 消息列表 -->
            <div class="message-list">
                <div v-if="filteredMessages.length === 0" class="empty-state">
                    <el-icon size="64" class="empty-icon">
                        <Message />
                    </el-icon>
                    <h3>暂无消息</h3>
                    <p>您当前没有符合条件的消息通知</p>
                </div>

                <div v-else>
                    <div v-for="message in filteredMessages" :key="message.id" class="message-item"
                        :class="{ 'unread': !message.isRead, 'read': message.isRead }" @click="toggleRead(message)">
                        <div class="message-content">
                            <div class="message-header">
                                <div class="message-title">
                                    <el-icon :class="getMessageIconClass(message.type)">
                                        <component :is="getMessageIcon(message.type)" />
                                    </el-icon>
                                    <span>{{ message.title }}</span>
                                    <el-tag v-if="!message.isRead" type="danger" size="small" class="unread-tag">
                                        未读
                                    </el-tag>
                                </div>
                                <div class="message-time">{{ formatTime(message.createTime) }}</div>
                            </div>

                            <div class="message-body">
                                <p>{{ message.content }}</p>
                            </div>

                            <div class="message-footer">
                                <div class="message-type">
                                    <el-tag :type="getMessageTypeColor(message.type)" size="small">
                                        {{ getMessageTypeName(message.type) }}
                                    </el-tag>
                                </div>
                                <div class="message-actions">
                                    <el-button v-if="!message.isRead" type="primary" size="small" :icon="Check"
                                        @click.stop="markAsRead(message)">
                                        标记已读
                                    </el-button>
                                    <el-button type="danger" size="small" :icon="Delete"
                                        @click.stop="deleteMessage(message)">
                                        删除
                                    </el-button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 分页 -->
            <div class="pagination-section" v-if="filteredMessages.length > 0">
                <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                    :page-sizes="[10, 20, 50, 100]" :total="filteredMessages.length"
                    layout="total, sizes, prev, pager, next, jumper" background />
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
    Bell,
    Message,
    Setting,
    Coin,
    Check,
    Delete,
    Warning,
    InfoFilled,
    SuccessFilled,
    CircleCheckFilled
} from '@element-plus/icons-vue'

// 消息接口定义
interface NotificationMessage {
    id: number
    title: string
    content: string
    type: 'system' | 'finance' | 'work' | 'security'
    isRead: boolean
    createTime: string
    priority: 'high' | 'medium' | 'low'
}

// 响应式数据
const selectedType = ref('')
const selectedStatus = ref('')
const currentPage = ref(1)
const pageSize = ref(10)

// 模拟消息数据
const messages = ref<NotificationMessage[]>([
    {
        id: 1,
        title: '财务部通知您！',
        content: '本月您的工资已到账，已转入尾号3376的银行卡中，请注意查收！',
        type: 'finance',
        isRead: false,
        createTime: '2024-01-15 14:30:00',
        priority: 'high'
    },
    {
        id: 2,
        title: '系统维护通知',
        content: '系统将于今晚22:00-24:00进行维护升级，期间可能影响正常使用，请提前保存工作数据。',
        type: 'system',
        isRead: false,
        createTime: '2024-01-15 10:15:00',
        priority: 'medium'
    },
    {
        id: 3,
        title: '工作提醒',
        content: '您有3个待处理的畜牧档案需要审核，请及时处理。',
        type: 'work',
        isRead: true,
        createTime: '2024-01-14 16:45:00',
        priority: 'medium'
    },
    {
        id: 4,
        title: '安全提醒',
        content: '检测到您的账户在异地登录，如非本人操作请及时修改密码。',
        type: 'security',
        isRead: true,
        createTime: '2024-01-14 09:20:00',
        priority: 'high'
    },
    {
        id: 5,
        title: '月度报表生成',
        content: '1月份畜牧养殖月度报表已生成并发送给相关负责人。',
        type: 'system',
        isRead: true,
        createTime: '2024-01-13 18:30:00',
        priority: 'low'
    },
    {
        id: 6,
        title: '健康检查完成',
        content: '完成全部畜牧的健康检查，发现3只需要特殊护理。',
        type: 'work',
        isRead: false,
        createTime: '2024-01-13 14:20:00',
        priority: 'medium'
    }
])

// 计算属性
const unreadCount = computed(() => messages.value.filter(msg => !msg.isRead).length)
const totalCount = computed(() => messages.value.length)
const readCount = computed(() => messages.value.filter(msg => msg.isRead).length)
const systemCount = computed(() => messages.value.filter(msg => msg.type === 'system').length)
const financeCount = computed(() => messages.value.filter(msg => msg.type === 'finance').length)

const filteredMessages = computed(() => {
    let filtered = messages.value

    // 按类型筛选
    if (selectedType.value) {
        filtered = filtered.filter(msg => msg.type === selectedType.value)
    }

    // 按状态筛选
    if (selectedStatus.value) {
        if (selectedStatus.value === 'read') {
            filtered = filtered.filter(msg => msg.isRead)
        } else if (selectedStatus.value === 'unread') {
            filtered = filtered.filter(msg => !msg.isRead)
        }
    }

    // 按优先级排序（未读优先，然后按时间倒序）
    filtered.sort((a, b) => {
        if (a.isRead !== b.isRead) {
            return a.isRead ? 1 : -1
        }
        return new Date(b.createTime).getTime() - new Date(a.createTime).getTime()
    })

    return filtered
})

// 方法
const getMessageIcon = (type: string) => {
    const iconMap = {
        system: Setting,
        finance: Coin,
        work: CircleCheckFilled,
        security: Warning
    }
    return iconMap[type as keyof typeof iconMap] || InfoFilled
}

const getMessageIconClass = (type: string) => {
    const classMap = {
        system: 'system-icon',
        finance: 'finance-icon',
        work: 'work-icon',
        security: 'security-icon'
    }
    return classMap[type as keyof typeof classMap] || 'default-icon'
}

const getMessageTypeName = (type: string) => {
    const nameMap = {
        system: '系统通知',
        finance: '财务通知',
        work: '工作提醒',
        security: '安全提醒'
    }
    return nameMap[type as keyof typeof nameMap] || '未知类型'
}

const getMessageTypeColor = (type: string) => {
    const colorMap = {
        system: 'primary',
        finance: 'success',
        work: 'warning',
        security: 'danger'
    }
    return colorMap[type as keyof typeof colorMap] || 'info'
}

const formatTime = (timeStr: string) => {
    const time = new Date(timeStr)
    const now = new Date()
    const diff = now.getTime() - time.getTime()

    if (diff < 60000) { // 1分钟内
        return '刚刚'
    } else if (diff < 3600000) { // 1小时内
        return `${Math.floor(diff / 60000)}分钟前`
    } else if (diff < 86400000) { // 24小时内
        return `${Math.floor(diff / 3600000)}小时前`
    } else if (diff < 604800000) { // 7天内
        return `${Math.floor(diff / 86400000)}天前`
    } else {
        return time.toLocaleDateString()
    }
}

const toggleRead = (message: NotificationMessage) => {
    message.isRead = !message.isRead
    ElMessage.success(message.isRead ? '已标记为已读' : '已标记为未读')
}

const markAsRead = (message: NotificationMessage) => {
    message.isRead = true
    ElMessage.success('已标记为已读')
}

const markAllAsRead = () => {
    messages.value.forEach(msg => {
        msg.isRead = true
    })
    ElMessage.success('已将所有消息标记为已读')
}

const deleteMessage = (message: NotificationMessage) => {
    ElMessageBox.confirm(
        '确定要删除这条消息吗？',
        '删除确认',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        const index = messages.value.findIndex(msg => msg.id === message.id)
        if (index > -1) {
            messages.value.splice(index, 1)
            ElMessage.success('消息已删除')
        }
    }).catch(() => {
        ElMessage.info('已取消删除')
    })
}

const deleteAllRead = () => {
    ElMessageBox.confirm(
        '确定要删除所有已读消息吗？此操作不可恢复！',
        '删除确认',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        messages.value = messages.value.filter(msg => !msg.isRead)
        ElMessage.success('已删除所有已读消息')
    }).catch(() => {
        ElMessage.info('已取消删除')
    })
}

const filterMessages = () => {
    // 筛选逻辑在计算属性中处理
    console.log('筛选消息:', selectedType.value, selectedStatus.value)
}

// 组件挂载
onMounted(() => {
    console.log('通知页面已加载')
})
</script>

<style scoped>
/* 通知页面样式 */
.notification-container {
    min-height: 100vh;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    padding: 20px;
}

/* 面包屑导航样式 */
.breadcrumb-container {
    margin: 0 auto 30px;
    max-width: 1200px;
}

.breadcrumb-nav {
    font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
    margin-bottom: 20px;
}

.breadcrumb-link {
    color: #606266;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s ease;
}

.breadcrumb-link:hover {
    color: #409EFF;
}

.breadcrumb-text {
    color: #606266;
    font-size: 14px;
}

.breadcrumb-current {
    color: #303133;
    font-size: 14px;
    font-weight: 500;
}

/* 页面标题样式 */
.page-header {
    margin-bottom: 20px;
}

.page-title {
    font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
    font-size: 28px;
    font-weight: bold;
    color: #303133;
    margin: 0 0 8px 0;
    line-height: 1.2;
}

.page-description {
    font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
    font-size: 16px;
    color: #909399;
    margin: 0;
    line-height: 1.4;
}

/* 分隔线样式 */
.divider {
    height: 2px;
    background: linear-gradient(90deg, #9281ce 0%, #828fd5 50%, #08a8cc 100%);
    margin: 20px 0;
    border-radius: 1px;
}

/* 通知内容区域 */
.notification-content {
    max-width: 1200px;
    margin: 0 auto;
}

/* 统计卡片样式 */
.stats-section {
    margin-bottom: 30px;
}

.stat-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border-left: 4px solid;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.unread-card {
    border-left-color: #f56c6c;
}

.total-card {
    border-left-color: #409EFF;
}

.system-card {
    border-left-color: #67C23A;
}

.finance-card {
    border-left-color: #E6A23C;
}

.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.unread-card .stat-icon {
    background: linear-gradient(135deg, #f56c6c 0%, #e64340 100%);
}

.total-card .stat-icon {
    background: linear-gradient(135deg, #409EFF 0%, #337ecc 100%);
}

.system-card .stat-icon {
    background: linear-gradient(135deg, #67C23A 0%, #529b2e 100%);
}

.finance-card .stat-icon {
    background: linear-gradient(135deg, #E6A23C 0%, #cf9236 100%);
}

.stat-info h3 {
    font-size: 14px;
    color: #909399;
    margin: 0 0 8px 0;
    font-weight: 500;
}

.stat-number {
    font-size: 24px;
    font-weight: bold;
    color: #303133;
    margin: 0;
}

/* 筛选区域样式 */
.filter-section {
    background: white;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.filter-left {
    display: flex;
    gap: 16px;
    align-items: center;
}

.filter-right {
    display: flex;
    gap: 12px;
}

/* 消息列表样式 */
.message-list {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.message-item {
    padding: 20px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.message-item:last-child {
    border-bottom: none;
}

.message-item:hover {
    background: #f8f9fa;
}

.message-item.unread {
    background: #fff7e6;
    border-left: 4px solid #f56c6c;
}

.message-item.read {
    opacity: 0.8;
}

.message-content {
    width: 100%;
}

.message-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.message-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    color: #303133;
}

.message-title .el-icon {
    font-size: 18px;
}

.system-icon {
    color: #409EFF;
}

.finance-icon {
    color: #67C23A;
}

.work-icon {
    color: #E6A23C;
}

.security-icon {
    color: #f56c6c;
}

.unread-tag {
    margin-left: 8px;
}

.message-time {
    font-size: 12px;
    color: #909399;
}

.message-body {
    margin-bottom: 16px;
}

.message-body p {
    margin: 0;
    color: #606266;
    line-height: 1.6;
}

.message-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.message-actions {
    display: flex;
    gap: 8px;
}

/* 空状态样式 */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #909399;
}

.empty-icon {
    margin-bottom: 16px;
    opacity: 0.5;
}

.empty-state h3 {
    margin: 0 0 8px 0;
    font-size: 18px;
    color: #606266;
}

.empty-state p {
    margin: 0;
    font-size: 14px;
}

/* 分页样式 */
.pagination-section {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .notification-container {
        padding: 10px;
    }

    .filter-section {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-left {
        flex-direction: column;
        gap: 12px;
    }

    .filter-right {
        justify-content: center;
    }

    .message-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .message-footer {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }

    .page-title {
        font-size: 24px;
    }

    .page-description {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .stats-section .el-col {
        margin-bottom: 16px;
    }

    .message-actions {
        flex-direction: column;
        width: 100%;
    }

    .message-actions .el-button {
        width: 100%;
    }
}
</style>
